﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Persistent toolbars - jQuery Mobile Demos</title>
    <link href="../css/themes/default/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" /> 
    <script src="http://localhost:14508/js/jquery.js" type="text/javascript"></script>
    <script src="../js/jquery.mobile-1.4.2.js" type="text/javascript"></script> 
     
    <script>
        $(function () {
            $("[data-role='navbar']").navbar();
            $("[data-role='header'], [data-role='footer']").toolbar();
        });
        // 更新工具栏的内容
        $(document).on("pageshow", "[data-role='page']", function () {
            var current = $(this).jqmData("title");
            // Change the heading
            $("[data-role='header'] h1").text(current);
            $("[data-role='navbar'] a.ui-btn-active").removeClass("ui-btn-active");
            $("[data-role='navbar'] a").each(function () {
                if ($(this).text() === current) {
                    $(this).addClass("ui-btn-active");
                }
            });
        });
    </script>
</head>
<body>
    <div data-role="header" data-position="fixed" data-theme="a">
        <a href="../" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">
            Back</a>
        <h1>
            Info</h1>
    </div>
    <!-- /header -->
    <div data-role="page" data-title="登录" class="jqm-demos">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <div>
                <label for="name">
                    用户:</label>
                <input type="text" name="name" id="name" placeholder="用户" data-clear-btn="true" />
            </div>
            <div>
                <label for="username">
                    密码:</label>
                <input type="password" name="password" id="password" placeholder="密码" data-clear-btn="true" />
            </div>
            <div>
                <a data-role="button" id="submit" data-theme="b">登录</a>
                <script type="text/javascript">
                    $("#submit").click(function () {
                        var b = verify();
                        if (b) {
                            var db = window.openDatabase("SugarDB", "1.0", "SugarDB", 5000000);
                            db.transaction(queryIB, errorIB, successIB);
                        }
                    });
                    // 查询数据库
                    function queryIB(tx) {
                        var username = document.getElementById("name").value;
                        var password = document.getElementById("password").value;
                        var selectsql = "select * from UserAccount where username='" + username + "'";
                        tx.executeSql(selectsql, [], querySuccess, errorIB);
                    }
                    // 查询成功后调用的回调函数
                    function querySuccess(tx, results) {
                        var username = document.getElementById("name").value;
                        if (results.rows.length != 0) {
                            $.cookie('name', username);
                            var name = $.cookie('name');
                            alert(name);
                            alert("ok");
                            //window.location.href = "toolbarfixed.html";
                        }
                        else {
                            alert("用户不存在！");
                        }
                    }
                    function errorIB(err) {
                        console.log("错误处理的SQL：" + err.code + "错误信息：" + err.message);
                        alert("错误信息：" + err.message);

                    }
                    // 事务执行成功后调用的回调函数
                    function successIB() {
                    }
                    //验证
                    function verify() {
                        var name = document.getElementById("name").value;
                        if (name == "" || name == null) {
                            alert("登录名不能为空！");
                            return false;
                        }
                        return true;
                    }
                </script>
            </div>
        </div>
    </div>
    <!-- /page -->
    <div data-role="footer" class="ui-body-b ui-body" data-position="fixed">
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a href="login.html" data-icon="edit" data-prefetch="true" data-transition="fade">
                    登录</a></li>
                <li><a href="register.html" data-icon="edit" data-prefetch="true" data-transition="fade">
                    注册</a></li>
                <li><a href="setup.html" data-icon="gear" data-prefetch="true" data-transition="turn">
                    设置数据库</a></li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
    <!-- /footer -->
</body>
</html>
